<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Chat</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/emojione/2.2.6/assets/css/emojione.min.css"/>
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" href="/friendlist.css">

</head>
<body>
<header>
    <nav>
        <div class="nav-wrapper">
            <div href="/" class="brand-logo right">Simple Chat</div>
        </div>
    </nav>
</header>

<main id="app">
<div style="float:left;width:90%;">
    <div class="row">
        <div class="col s12">
            <div class="card horizontal">
                <div id="chat-messages" class="card-content" v-html="chatContent">
                </div>
            </div>
        </div>
    </div>
    <div class="row" v-if="joined">
        <div class="input-field col s8">
            <input type="text" v-model="newMsg" @keyup.enter="send">
        </div>
        <div class="input-field col s4">
            <button class="waves-effect waves-light btn" @click="send">
                <i class="material-icons right">chat</i>
                Send
            </button>
        </div>
       
    </div>
    <div class="row" v-if="!joined">
        
        <div class="input-field col s8">
            <input id="username" type="text" v-model.trim="username" placeholder="用户名">
        </div>
        <div class="input-field col s8">
            <input v-model.trim="password" placeholder="密码">
        </div>
        <div class="input-field col s4">
            <button class="waves-effect waves-light btn" @click="join()">
                <i class="material-icons right">done</i>
                登录
            </button>
             <button class="waves-effect waves-light btn" @click="register()">
                <i class="material-icons right">done</i>
                注册
            </button>
        </div>       
    </div>
   
    <form id="uploadFileForm" v-bind:action="file_action" method="post" enctype="multipart/form-data" target="submitFrame">
          <p><input type="file" name="upload"></p>
          <p><input type="submit"  value="上传文件"></p>
    </form>
    <form id="uploadImgForm" v-bind:action="img_action" method="post" enctype="multipart/form-data" target="submitFrame">
          <p><input type="file" name="upload"></p> 
          <p><input type="submit" value="上传图片"></p>
    </form>    
    <form id="getOldMessageForm" v-bind:action="oldmsg_action" method="post" target="submitFrame">             
          <p><input id="get_oldmsg" type="submit" value="获取聊天记录"></p>
    </form>
     <input id="addname" type="text" value="" placeholder="要添加的好友">
     <p><input type="button" onclick="addfriend()" value="确认好友"></p>
    <form id="addFriendForm" v-bind:action="addfriend_action" method="post" target="submitFrame">         
          <p><input type="submit" value="添加好友"></p>
    </form>
 </div>
<div class="FriendList" style="float:right;width:10%;" v-html="friendlist">


</div> 
<!--<ul class="box">
    <li>
        <span>我的好友</span>
        <div name="list" class="hidden">
            <a href="javascript:;">我的好友1</a>
            <a href="javascript:;">我的好友2</a>
            <a href="javascript:;">我的好友3</a>
            <a href="javascript:;">我的好友4</a>
        </div>
    </li>
    <li>
        <span>我的同事</span>
        <div name="list" class="hidden">
            <a href="javascript:;">我的同事1</a>
            <a href="javascript:;">我的同事2</a>
            <a href="javascript:;">我的同事3</a>
            <a href="javascript:;">我的同事4</a>
            <a href="javascript:;">我的同事5</a>
            <a href="javascript:;">我的同事6</a>
            <a href="javascript:;">我的同事7</a>
        </div>
    </li>
    <li>
        <span>黑名单</span>
        <div name="list" class="hidden">
            <a href="javascript:;">黑名单1</a>
            <a href="javascript:;">黑名单2</a>
        </div>
    </li>
</ul>-->
  
</main>
<footer class="page-footer">
</footer>
　 <iframe  id="submitFrame" style="display: none;width:0; height:0" name="submitFrame"  src="about:blank"></iframe>
<script src="https://unpkg.com/vue@2.1.3/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/emojione/2.2.6/lib/js/emojione.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/md5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script src="/app.js"></script>
</body>
</html>